
import { useState, useEffect } from "react";
import { useSelector, shallowEqual } from "react-redux"
import NProgress from 'nprogress'

import { renderRoutes } from "react-router-config";
import CommonHeader from "comp/common/commonHeader"
import MenuList from "comp/menuList"
import Bread from "comp/bread"

import { menulist } from "@/utils/menu"

import { routes, handleRouters } from "@/router"
import 'nprogress/nprogress.css'

export default function Home() {
    NProgress.start()

    const { userdata } = useSelector(state => ({
        userdata: state.userdata
    }), shallowEqual)

    const [collapsed, setCollapsed] = useState(false)
    const [title, settitle] = useState(["就业升学可视化", "就业升学表格"])

    useEffect(() => {
        // 打开项
        const path = sessionStorage.getItem("menuPath") || ""
        if (path) {

            getTitle(path)

        }
        NProgress.done()
    }, [])

    const getTitle = path => {
        menulist.forEach(item => {
            item.children.forEach(item1 => {
                if (item1.path === path) {
                    settitle([item.title, item1.title])
                }
            })
        })
    }

    const switchCollapsed = () => {
        setCollapsed(!collapsed)
    }

    // 获取面包学 title
    const getBreadTitle = (path) => {
        // console.log(path,routes)
        routes.find(item => {
            if (item.path === path) {
                settitle(item.meta.title.split("/"))
            }
        })
    }

    return (
        <div className="home">
            <CommonHeader userdata={userdata}></CommonHeader>
            <div className="container">
                <MenuList getBreadTitle={getBreadTitle} collapsed={collapsed} />
                <div className="right">
                    <Bread title={title} collapsed={collapsed} switchCollapsed={switchCollapsed} />
                    <div className="router2_cover">

                        {userdata ? renderRoutes(handleRouters(userdata.user_jurisdiction_routerlist)) : null}
                    </div>
                </div>
            </div>
        </div>

    )
}
